<template>
  <div class="menu-nav">
    <!-- <p class="refresh-icon" @click="refreshContent"></p> -->
    <Menu :menuList="menuList" :addTab="addTab" :activeIndex="activeIndex"/>
  </div>
</template>

<script>
import  Menu from './Menu.vue'

  export default {
    name: 'Nav',
    props: [
      'addTab',
      'reload'
    ],
    components:{
      Menu
    },
    data() {
      return {
        menuList: [],
        activeIndex: '1'
      }
    },
    created() {
      let menuList = this.$store.state.userinfo.resources || []
      let newMenuList = []
      let buttonPermission = {}
      
      for (var i=0, len=menuList.length; i < len; i++) {
        if (!menuList[i].parentId) {
          newMenuList.push(menuList[i])
        }
        if(!buttonPermission[menuList[i].link] || (buttonPermission[menuList[i].link] && menuList[i].optAction.length > buttonPermission[menuList[i].link].split(',').length)) {
          buttonPermission[menuList[i].link] = menuList[i].optAction.join(',')
        }
      }
      // 将按钮权限对象存放在vuex中
      this.$store.state.buttonPermission = buttonPermission
      this.menuList = newMenuList
    },
    methods: {
      refreshContent() {
        this.reload()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .menu-nav {
    float: left;
    display: flex;
    background-color: #446BDE;
    // width: 1550px;
    height: 48px;
    overflow: hidden;
  }
</style>
